<template>
	<div class="shopmean">
		<div class="left_form">
			<el-form
				:model="ruleForm"
				:rules="rules"
				ref="ruleForm"
				label-width="100px"
				class="demo-ruleForm"
			>
				<div class="left">
					<el-form-item label="活动名称" prop="name">
						<el-input v-model="ruleForm.name"></el-input>
					</el-form-item>
					<el-form-item label="商品关键字" prop="valtext">
						<el-input v-model="ruleForm.valtext"></el-input>
					</el-form-item>
					<el-form-item label="商品简介" prop="desc">
						<el-input
							type="textarea"
							v-model="ruleForm.desc"
						></el-input>
					</el-form-item>
					<el-form-item label="商品轮播图" prop="shopbanner">
						<el-upload
							action="https://jsonplaceholder.typicode.com/posts/"
							list-type="picture-card"
							:on-preview="handlePictureCardPreview"
							:on-remove="handleRemove"
						>
							<i class="el-icon-plus"></i>
						</el-upload>
						<el-dialog :visible.sync="ruleForm.bannerVisible">
							<img width="100%" :src="ruleForm.banner" alt="" />
						</el-dialog>
					</el-form-item>
					<el-form-item label="运费模板" prop="send">
						<el-select
							v-model="ruleForm.send"
							placeholder="请选择活动区域"
						>
							<el-option
								label="区域一"
								value="shanghai"
							></el-option>
							<el-option
								label="区域二"
								value="beijing"
							></el-option>
						</el-select>
						<el-button>添加运费模板</el-button>
					</el-form-item>
				</div>
				<div class="right">
					<el-form-item label="活动区域" prop="region">
						<el-select
							v-model="ruleForm.region"
							placeholder="请选择活动区域"
						>
							<el-option
								label="区域一"
								value="shanghai"
							></el-option>
							<el-option
								label="区域二"
								value="beijing"
							></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="单位" prop="company">
						<el-input v-model="ruleForm.company"></el-input>
					</el-form-item>
					<el-form-item label="商品封面图" prop="shopimg">
						<el-upload
							action="https://jsonplaceholder.typicode.com/posts/"
							list-type="picture-card"
							:on-preview="handlePictureCardPreview"
							:on-remove="handleRemove"
						>
							<i class="el-icon-plus"></i>
						</el-upload>
						<el-dialog :visible.sync="ruleForm.dialogVisible">
							<img
								width="100%"
								:src="ruleForm.dialogImageUrl"
								alt=""
							/>
						</el-dialog>
					</el-form-item>
				</div>
			</el-form>
		</div>
		<!--   <div class="right_form">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="活动区域" prop="region">
          <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="单位" prop="company">
          <el-input v-model="ruleForm.company"></el-input>
        </el-form-item>
        <el-form-item label="商品封面图" prop="shopimg">
          <el-upload
            action="https://jsonplaceholder.typicode.com/posts/"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="ruleForm.dialogVisible">
            <img width="100%" :src="ruleForm.dialogImageUrl" alt="">
          </el-dialog>
        </el-form-item>
      </el-form>
    </div> -->
	</div>
</template>
<script>
export default {
	name: "Theform",
	data() {
		return {
			ruleForm: {
				name: "",
				region: "",
				send: "",
				valtext: "",
				company: "",
				desc: "",
				dialogImageUrl: "",
				dialogVisible: false,
				banner: "",
				bannerVisible: false,
			},
			rules: {
				name: [
					{
						required: true,
						message: "请输入活动名称",
						trigger: "blur",
					},
					{
						min: 3,
						max: 5,
						message: "长度在 3 到 5 个字符",
						trigger: "blur",
					},
				],
				valtext: [
					{
						required: false,
						message: "请输入商品关键字",
						trigger: "blur",
					},
				],
				company: [
					{ required: true, message: "请输入单位", trigger: "blur" },
				],
				region: [
					{
						required: true,
						message: "请选择活动区域",
						trigger: "change",
					},
				],
				desc: [
					{
						required: false,
						message: "请输入商品简介",
						trigger: "change",
					},
				],
				shopimg: [
					{ required: false, message: "提交图片", trigger: "click" },
				],
				shopbanner: [
					{ required: false, message: "提交图片", trigger: "click" },
				],
				send: [
					{
						required: true,
						message: "请选择物流模块",
						trigger: "change",
					},
				],
			},
		};
	},
	methods: {
		submitForm(formName) {
			return new Promise((resolve, reject) => {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						resolve("submit!");
					} else {
						reject("error submit!!");
						return false;
					}
				});
			});
		},
		resetForm(formName) {
			this.$refs[formName].resetFields();
		},
		handleRemove(file, fileList) {
			console.log(file, fileList);
		},
		handlePictureCardPreview(file) {
			this.dialogImageUrl = file.url;
			this.dialogVisible = true;
		},
	},
};
</script>
<style lang="scss" scoped>
.shopmean {
	width: 100%;
	height: 60%;
	display: flex;
	.left_form {
		width: 100%;
	}
	.el-form {
		display: flex;

		.left {
			width: 50%;

			padding: 10px;
		}
		.right {
			width: 50%;

			padding: 10px;
		}
	}
}
</style>
